﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="tricogol.metro.GroupedItemsPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:tricogol.metro"
    xmlns:data="using:tricogol.metro.Data"
    xmlns:common="using:tricogol.metro.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
    mc:Ignorable="d" Loaded="pageRoot_Loaded">

   <!--
    <Page.DataContext>
        <local:GroupedItemsPageViewModel/>
    </Page.DataContext>
    -->
    
    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        
        <Grid.Background>
            <ImageBrush ImageSource="/Assets/Grass1.jpg" Stretch="UniformToFill"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0.17*"/>

        </Grid.RowDefinitions>
       
        <!-- Horizontal scrolling grid used in most view states -->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="2"
            Padding="116,137,40,20"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="False"
            ItemClick="ItemView_ItemClick" IsTabStop="False" IsItemClickEnabled="True" TabNavigation="Once" ScrollViewer.HorizontalScrollBarVisibility="Auto">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>                        
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            
            <GridView.GroupStyle>
                
                <GroupStyle>
                    
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
        
        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource Standard80ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <Button 
                                    AutomationProperties.Name="Group Title"
                                    Click="Header_Click"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Visibility="Collapsed"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Margin="95,0,0,55" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

      

        <!--App Bar-->
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>


                <GridView  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_2" IsItemClickEnabled="True" >
                    <Image Source="/Assets/BARCELONA.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />  
                 </GridView>
                <GridView Grid.Column="1"  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_1" IsItemClickEnabled="True" >
                    <Image Source="/Assets/CUENCA.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_3" IsItemClickEnabled="True" >
                    <Image Source="/Assets/EMELEC.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_4" IsItemClickEnabled="True" >
                    <Image Source="/Assets/INDEPENDIENTE.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="4"  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_5" IsItemClickEnabled="True" >
                    <Image Source="/Assets/LIGAQ.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="5"  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_6" IsItemClickEnabled="True" >
                    <Image Source="/Assets/LIGAL.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView  Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_7" IsItemClickEnabled="True" >
                    <Image Source="/Assets/MACARA.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="7"  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_8" IsItemClickEnabled="True" >
                    <Image Source="/Assets/MANTA.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="8" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_9" IsItemClickEnabled="True" >
                    <Image Source="/Assets/NACIONAL.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="9" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_10" IsItemClickEnabled="True" >
                    <Image Source="/Assets/OLMEDO.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="10"  HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_11" IsItemClickEnabled="True" >
                    <Image Source="/Assets/QUITO.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />
                </GridView>
                <GridView Grid.Column="11" HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="GridView_Tapped_12" IsItemClickEnabled="True" >
                    <Image Source="/Assets/TECNICO.png" Stretch="Fill"   HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="125" />

                </GridView>
         
                <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>

            </Grid>

        </AppBar>
        
        


        
            <UI:AdControl Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center"
            
            ApplicationId="8cbb9ef3-a91f-414a-a157-358bb9c3103e" 
            AdUnitId="10045854" 
            
            Height="90" 
            Margin="0,0,0,0" 
            
            Width="728" AllowDrop="True"/>
        



        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <Page.BottomAppBar>
        
        <AppBar x:Name="BottomAppBar1" IsSticky="True" AutomationProperties.Name="Bottom App Bar" >
            <GridView x:Name="CambioEquipo" Width="83" Height="83" HorizontalAlignment="Right" Margin="0,9,10,0" IsSwipeEnabled="True" IsItemClickEnabled="True" ItemClick="CambioEquipo_ItemClick" Tapped="CambioEquipo_Tapped">


                <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
                    <Grid>
                        <Grid Name="backgroundGrid" Width="48" Height="48" Visibility="Visible">
                            <Rectangle Fill="#FF969191" Name="Rect" Visibility="Visible" />
                        </Grid>
                        <Path Data="M4.6186699,54.766C7.1681873,54.766 9.2360002,56.833688 9.2360002,59.382951 9.2360002,61.935014 7.1681873,64.000005 4.6186699,64.000005 2.0691524,64.000005 -4.1723251E-07,61.935014 0,59.382951 -4.1723251E-07,56.833688 2.0691524,54.766 4.6186699,54.766z M18.525272,9.3580005C19.320825,9.3793757 20.088407,9.5753764 20.756074,10.108562 24.42007,12.788264 27.959165,15.654066 31.611558,18.366366 32.752158,19.221869 33.990455,20.266068 34.193557,21.772668 33.947456,23.578671 31.783158,24.733571 30.271661,23.547369 26.244466,20.714068 22.416173,17.624267 18.451379,14.702365 20.186977,22.866369 22.244472,30.951074 23.90837,39.130681 26.983867,40.802682 30.091962,42.409379 33.12836,44.147584 34.443557,44.820783 35.706454,46.339086 34.998256,47.883283 34.502155,49.569486 32.561958,50.380689 30.98656,49.628083 27.800265,48.292184 24.896669,46.366384 21.884973,44.682782 20.783174,43.922383 19.396676,43.38598 18.674077,42.21798 17.845878,39.565579 17.44358,36.799979 16.80688,34.100778 16.045081,34.409375 15.841982,35.109876 16.232581,35.88848 17.737779,42.71008 19.384977,49.499185 20.857574,56.333886 21.189674,57.897592 21.080274,60.16969 19.154475,60.57079 17.13898,61.311791 15.259982,59.492692 15.013883,57.57079 12.759986,47.984883 10.641488,38.370276 8.4070823,28.780473 7.5920131,25.83907 7.3185832,22.725769 6.0658957,19.928968 5.4982659,21.651568 6.3783943,23.401569 6.6648938,25.09937 7.2846434,28.260873 8.2560818,31.370273 8.6701419,34.573476 9.2742702,36.591578 5.9617745,37.648879 5.0373356,35.971877 3.9982676,34.171075 3.8133377,32.046073 3.2795183,30.073474 2.4592099,26.272672 1.3002814,22.538269 0.74949747,18.682767 0.28990275,15.984865 1.9435905,13.198364 4.5711474,12.398863 8.1777117,11.428962 11.841987,10.702362 15.470882,9.7960622 16.433318,9.5917056 17.502414,9.3305195 18.525272,9.3580005z M9.5757439,0.0021734238C12.997393,-0.10609245 15.808484,3.8518667 14.38084,7.1019673 13.138794,10.573665 8.1024143,11.30023 5.821264,8.4444968 3.2120082,5.8076026 4.9359228,0.86704445 8.4982669,0.17160225 8.8612816,0.068087578 9.22178,0.013372421 9.5757439,0.0021734238z" Stretch="Uniform" Fill="#FF000000" Width="34" Height="34" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <RotateTransform Angle="0" />
                                        <ScaleTransform ScaleX="1" ScaleY="1" />
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </Viewbox>
                

            </GridView>
        </AppBar>
    </Page.BottomAppBar>
</common:LayoutAwarePage>
